// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`~/vue_merge_request_widget/components/widget/dynamic_content.vue renders given data 1`] = `
<div
  class="gl-align-items-baseline gl-border-t gl-display-flex gl-pl-7 gl-py-3"
>
  <div
    class="gl-min-w-0 gl-w-full"
  >
    <div
      class="gl-display-flex"
    >
      <div
        class="gl-mb-2"
      >
        <strong
          class="gl-display-block"
        >
          This is a header
        </strong>
        <span
          class="gl-display-block"
        >
          This is a subheader
        </span>
      </div>
      <div
        class="gl-align-items-baseline gl-display-flex gl-ml-auto"
      >
        <help-popover-stub
          icon="information-o"
          options="[object Object]"
          triggerclass=""
        >
          <p
            class="gl-mb-0"
          >
            Widget help popover content
          </p>
        </help-popover-stub>
      </div>
    </div>
    <div
      class="gl-align-items-baseline gl-display-flex"
    >
      <status-icon-stub
        iconname="success"
        level="2"
        name="MyWidget"
      />
      <div
        class="gl-display-flex gl-w-full"
      >
        <div
          class="gl-display-flex gl-flex-grow-1"
        >
          <div
            class="gl-align-items-baseline gl-display-flex gl-flex-grow-1"
          >
            <div>
              <p
                class="gl-mb-0 gl-mr-1"
              >
                Main text for the row
              </p>
              <gl-link-stub
                href="https://gitlab.com"
              >
                Optional link to display after text
              </gl-link-stub>
            </div>
            <gl-badge-stub
              iconsize="md"
              size="md"
              variant="info"
            >
              Badge is optional. Text to be displayed inside badge
            </gl-badge-stub>
          </div>
          <p
            class="gl-font-sm gl-m-0"
          >
            Optional: Smaller sub-text to be displayed below the main text
          </p>
        </div>
        <ul
          class="gl-list-style-none gl-m-0 gl-p-0"
        >
          <li>
            <div
              class="gl-align-items-center gl-display-flex"
              data-qa-selector="child_content"
            >
              <div
                class="gl-min-w-0 gl-w-full"
              >
                <div
                  class="gl-display-flex"
                >
                  <div
                    class="gl-mb-2"
                  >
                    <strong
                      class="gl-display-block"
                    >
                      Child row header
                    </strong>
                  </div>
                </div>
                <div
                  class="gl-align-items-baseline gl-display-flex"
                >
                  <div
                    class="gl-display-flex gl-w-full"
                  >
                    <div
                      class="gl-display-flex gl-flex-grow-1"
                    >
                      <div
                        class="gl-align-items-baseline gl-display-flex gl-flex-grow-1"
                      >
                        <div>
                          <p
                            class="gl-mb-0 gl-mr-1"
                          >
                            This is recursive. It will be listed in level 3.
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
`;
